<template>
    <div class="item">
        <div class="short">
            <i class="pi pi-angle-right" style="padding: 4px;"
                :style="[{ visibility: item.groupshort.length ? 'visible' : 'hidden' }, showshort ? { transform: 'rotate(90deg)' } : {}]"
                @click="showshort = !showshort"></i>
            
            <InputText type="text" v-model="groups.value" style="width: 100%;" v-if="groups.edit" />
            <span v-else>{{ item.group_name }}</span>
        </div>
        <div class="createtime">{{ item.createtime }}</div>
        <div class="active">
            <Button type="button" icon="pi pi-check" severity="success" @click="save(item)" v-if="groups.edit" />
            <Button type="button" icon="pi pi-pencil" severity="warning" @click="edit()" v-else />

            <Button type="button" icon="pi pi-minus-circle" severity="warning" @click="edit()" v-if="groups.edit" />
            <Button type="button" icon="pi pi-times" severity="danger" @click="deletegroup(item)" v-else />

            <Button type="button" icon="pi pi-plus" severity="info" @click="addshort(item)" />
        </div>
    </div>
    <div v-if="showshort">
        <ShortItem v-for="(short) of item.groupshort" :key="short.id" :short="short"></ShortItem>
    </div>
</template>

<script setup>
import Button from 'primevue/button';
import { defineProps, ref, onMounted, inject } from 'vue'
import InputText from 'primevue/inputtext';
import ShortItem from './ShortItem.vue';

// 定义 props
const props = defineProps({
    item: Object
})

const showshort = ref(false)

// 接收函数
const updatename = inject('updatename');
const addshort = inject('addshort');
const deletegroup = inject('deletegroup');

const groups = ref({
    edit:false,
    value:null
})

// 编辑按钮
function edit(){
    groups.value.edit = !groups.value.edit
}

onMounted(() => {
    groups.value.value = props.item.group_name
})

// 保存按钮
function save(params){
    params.newname = groups.value.value
    updatename(params)
    groups.value.edit = !groups.value.edit
}

</script>

<style scoped lang="less">
.item {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    border-bottom: 1px solid #e2e8f0;

    &:hover {
        background-color: #f8fafc;
    }

    &>* {
        flex: 1;
        height: 50px;
        line-height: 50px;
        padding-left: 10px;

    }

    &>.active {
        display: flex;
        align-items: center;

        &>:nth-child(1) {
            margin-right: 10px;
        }

        &>:nth-child(2) {
            margin-right: 10px;
        }
    }

    &>.short {
        display: flex;
        align-items: center;

        .pi {
            cursor: pointer;
            box-sizing: border-box;

            &:hover {
                border-radius: 50%;
                background-color: #e2e8f0;
            }
        }
    }
}
</style>